/**
 * 自定义Footer
 */
import React, { Component } from 'react';
import { Container, Divider, Grid, Header, List, Segment, Icon } from 'semantic-ui-react'
import './Footer.css';

class Footer extends Component{
    render(){
        return (
            <Segment inverted vertical style={{ margin: "5em 0em 0em", padding: "2em 0em" }}>
                <Container textAlign="center">
                    <Grid divided inverted stackable>
                    <Grid.Column width={3}>
                        <Header inverted as="h4" content="相关资源" />
                        <List link inverted>
                        <List.Item as="a" href='http://www.antd.com'>Ant Design</List.Item>
                        <List.Item as="a">Semantic UI</List.Item>
                        <List.Item as="a">Foundation React</List.Item>
                        <List.Item as="a">Bootstrap</List.Item>
                        </List>
                    </Grid.Column>
                    <Grid.Column width={3}>
                        <Header inverted as="h4" content="社区" />
                        <List link inverted>
                        <List.Item as="a">微博</List.Item>
                        <List.Item as="a">知乎</List.Item>
                        <List.Item as="a">灵鹊</List.Item>
                        </List>
                    </Grid.Column>
                    <Grid.Column width={3}>
                        <Header inverted as="h4" content="帮助" />
                        <List link inverted>
                        <List.Item as="a">知识库</List.Item>
                        <List.Item as="a">文档</List.Item>
                        <List.Item as="a">Quora</List.Item>
                        <List.Item as="a">相关手册</List.Item>
                        </List>
                    </Grid.Column>
                    <Grid.Column width={7}>
                        <Header inverted as="h4" content="更多产品" />
                        <p>
                        We produce data for map service providers around the world, from open source data platforms to public service platforms, everything is our work area.
                        </p>
                    </Grid.Column>
                    </Grid>
                    <Divider inverted section />
                    <List horizontal inverted divided link size="small">
                    <List.Item as="a" href="#">
                        <Icon name="cubes" color="olive"></Icon>Powerd By Geoportal.cn
                    </List.Item>
                    </List>
                </Container>
            </Segment>            
        );
    }
}
export default Footer;